import { _decorator, Component, Node, resources, Sprite, SpriteFrame, Texture2D, UI, UITransform, Vec2, Vec3 } from 'cc';
import MapParams from '../MapParameters/MapParams';
import { playerController } from '../Controller/playerController';
import { globalObserver } from '../Observer/GlobalObserver';
import { PartActive } from './PartActive';
const { ccclass, property } = _decorator;

@ccclass('MapLayer')
export class MapLayer extends Component {

    private _sliceImgDic: { [key: string]: Sprite } = {};
    private _mapParams: MapParams = new MapParams();

    public get width(): number{
        if (this.bgImg) {
            return this.bgImg.getComponent(UITransform).width;
        }
        return this._mapParams.viewWidth;
    }

    public get height(): number {
        if (this.bgImg) {
            return this.bgImg.getComponent(UITransform).height;
        }
        return this._mapParams.viewHeight;
    }

    @property(Sprite)
    private bgImg: Sprite = null;

    public init(mapParams: MapParams): void {
        this._mapParams = mapParams;

        if (!this.bgImg) {
            var bgNode: Node = new Node();
            this.node.addChild(bgNode);
            bgNode.layer = this.node.layer;

            this.bgImg = bgNode.addComponent(Sprite);
            this.bgImg.sizeMode = Sprite.SizeMode.RAW;
            bgNode.getComponent(UITransform).anchorPoint = new Vec2(0, 0);
        }

        var spriteFrame: SpriteFrame = new SpriteFrame();
        spriteFrame.texture = this._mapParams.bgTex;

        this.bgImg.spriteFrame = spriteFrame;

        if (mapParams.mapLoadModel == 0) {
            this.bgImg.getComponent(UITransform).width = mapParams.mapWidth;
            this.bgImg.getComponent(UITransform).height = mapParams.mapHeight;
        }

        this.getComponent(UITransform).width = this.width;
        this.getComponent(UITransform).height = this.height;

    }

    /**
     * get information of each slices from resources
     * @param px number of slices in x direction
     * @param py number of slices in y direction
     */
    public loadAll(px, py): void {
        for (let j = 0; j <= py; j++) {
            for (let i = 0; i <= px; i++) {
                let source: string = j+'_'+i;
                let path: string = 'content/map/slices/'+source+'/texture';
                resources.load(path, Texture2D, (error: Error, tex: Texture2D) => {
                    if (error) {
                        console.log('load error');
                        return;
                    }
                    this.createSliceNode(source, tex, i, j);
                })
            }
        }
    }

    /**
     * create child nodes and load texture.
     * set node.active = false by default
     * @param sliceName name
     * @param texture image
     * @param x number of slices of x-position
     * @param y number of slices of y-position
     */
    private createSliceNode(sliceName: string, texture: Texture2D, x: number, y: number): void {
        let sliceSize = 256;
        let new_node = new Node(sliceName);
        let uiTransform = new_node.getComponent(UITransform) || new_node.addComponent(UITransform);
        uiTransform.setContentSize(sliceSize, sliceSize);
        uiTransform.anchorPoint = new Vec2(0, 0);
        
        let sprite = new_node.addComponent(Sprite);
        

        sprite.sizeMode = Sprite.SizeMode.RAW;

        let spriteFrame = new SpriteFrame();
        spriteFrame.texture = texture;
        sprite.spriteFrame = spriteFrame;

        new_node.setPosition(new Vec3(x * sliceSize, y * sliceSize, 0));
        new_node.addComponent(PartActive);
        this.node.addChild(new_node);

        this._sliceImgDic[sliceName] = sprite;
        //console.log(`Slice [${sliceName}] loaded and added to position (${x * sliceSize}, ${y * sliceSize})`);
    }

    loadMid() {
        this
    }

    update(dt) {

    }

    protected start(): void {
        this.loadAll(21, 15);
    }
}


